<template>
  <div class="code-view">
    <svg-icon iconClass="email" class="email-icon"/>
    <h4 class="code-title">{{ $t('code.email') }}</h4>
    <div class="sent-code">{{ $t('code.sent') }} {{ email }}</div>
    <el-input class="code-input" v-model.trim="code"  @blur="codeRule" ></el-input>
    <!-- <div class="coding" v-if="checking=='check'">Re-get verification code after <span class="time">{{ codeTime }}</span> seconds</div> -->
    <div class="coding" v-if="checking=='check'">
      <i18n path="code.effective" :tag="false">
        <template slot="codeTime">
          <span class='time'>{{ codeTime }}</span>
        </template>
      </i18n>
    </div>
    <div class="coding checking" v-else-if="checking=='checking'">{{ $t('code.checking') }}</div>
    <div class="coding code-status" v-else>
      <svg-icon :iconClass="checking=='successed'?'success':'error'" class="icon-code"/>
      <div class="timeout" v-if="checking=='timeout'" >
        {{  $t('code.invalid') }}
        <span class="get-code" @click="getCode" v-loading="loading" element-loading-spinner="el-icon-loading">{{ $t('code.Reacquire') }}</span>
      </div>
      <div class="timeout" v-else-if="checking=='expired'">
        {{  $t('code.expired') }}
        <span class="get-code" @click="getCode" v-loading="loading" element-loading-spinner="el-icon-loading">{{ $t('code.Reacquire') }}</span>
      </div>
      <div class="checked" v-else>
        {{ checking=='failed'?  $t('code.codeError'):$t('code.succeed') }}
      </div>
    </div>
    <div class="button">
      <el-button  class="back" @click="backLogin">{{ $t('code.back') }}</el-button>
      <el-button type="primary" class="next" @click="onEmailUpdate" >{{ $t('code.next') }}</el-button>
    </div>
  </div>
</template>
<script>
import { userLogon, upEmailPwd } from '@/api/login'
import { mapGetters } from 'vuex'
import { getPwdMD5Str } from '@/utils'
import mixins from '../../mixins'
export default {
  name: 'Code',
  mixins: [mixins],
  props: {
    password: {
      type: String,
      default: ''
    },
    email: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      code: '',
      codeTime: 0,
      checking: '',
      codeRight: false,
      loading: true
    }
  },
  computed: {
    ...mapGetters(['appInfo'])
  },
  methods: {
    success () {
      this.checking = 'successed'
      localStorage.setItem('emailaddress', this.email)
      setTimeout(() => {
        this.$emit('codeToLogin')
      }, 1000)
    },
    getCode () {
      if (this.loading) {
        return false
      }
      this.loading = true
      this.$emit('getCode')

      // this.timeChange()
    },
    timeChange (expired) {
      this.loading = false
      this.checking = 'check'
      this.codeTime = 60
      clearInterval(this.timerId)
      this.timerId = setInterval(() => {
        this.codeTime--
        expired--
        if (this.codeTime <= 0) {
          // clearInterval(this.timerId)
          this.codeTime = 0
          this.checking = 'timeout'
          this.$xz('xz_substat_action', 20093)
        }
        if (expired <= 0) {
          // clearInterval(this.timerId)
          expired = 0
          this.checking = 'expired'
        }
        if (expired <= 0 && this.codeTime <= 0) {
          clearInterval(this.timerId)
        }
      }, 1000)
    },
    codeRule () {
      this.codeRight = this.codeRules(this.code)
    },
    backLogin () {
      this.$emit('getType')
    },
    onEmailUpdate () {
      if (this.codeRight) {
        if (this.type === 'sign') {
          const params = {
            appid: process.env.VUE_APP_ID,
            type: 'email',
            pwd: getPwdMD5Str(this.password),
            email: this.email,
            channel: this.appInfo.channel, // 渠道信息
            uuid: this.appInfo.uuid, // 设备信息
            version: this.appInfo.version,
            device_name: this.appInfo.device_name, // 设备名称
            code: this.code,
            codeID: this.email
          }
          this.checking = 'checking'
          userLogon(params).then(res => {
            this.success()
          }).catch(() => {
            this.checking = 'failed'
          })
        } else if (this.type === 'forgot') {
          const params = {
            'type': 'mail',
            'pwd': getPwdMD5Str(this.password),
            'email': this.email,
            'code': this.code,
            'codeID': this.email
          }
          this.checking = 'checking'
          upEmailPwd(params).then((res) => {
            this.success()
          }).catch(() => {
            this.checking = 'failed'
          })
        }
      } else {
        this.codeRule()
      }
    }
  },
  beforeDestroy () {
    clearInterval(this.timerId)
  }
}
</script>
<style lang="scss" scoped>
.code-view{
  padding: 94px 62px 76px;
  width: 100%;
  height: 100%;
  .email-icon{
    margin-left: 50%;
    transform: translateX(-50%);
    width: 82px;
    height: 66px;
  }
  .code-title{
    margin: 12px 0 44px;
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #FFF;
  }
  .code-input{
    width: 100%;
    height: 44px;
    background: rgba(0,187,215,0.05);
    border-radius: 6px;
    border: 1px solid var(--color-primary-2);
    outline:none;
    &:hover{
      border: 1px solid var(--color-primary-1);
    }
    /deep/ .el-input__inner{
      padding: 0 10px;
      height: 100%;
      background:transparent;
      font-size: 16px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
      text-align:center;
      border:none;
    }
  }
  .coding{
    margin: 16px 0 50px;
    width: 100%;
    text-align: right;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, .7);
    .time{
      color:var(--color-primary)
    }
  }
  .checking{
    color:var(--color-primary)
  }
  .code-status{
    display: flex;
    align-items: center;
    justify-content:flex-end;
    .icon-code{
      margin-right: 5px;
      width: 14px;
      height: 14px;
    }
    .checked{
    color: #FFF
    }
    .timeout{
      font-size: 12px;
      font-weight: 400;
      color: #FFF;
      .get-code{
        border-bottom:1px solid #fff;
        cursor: pointer;
        &:hover{
          color: var(--color-primary);
          border-bottom-color: var(--color-primary);
        }
      }
      /deep/ .el-loading-mask{
        top: 21px;
        left: 100%;
        background-color: transparent;
      }
    }
  }
  .sent-code{
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 400;
    color: #FFF;
  }
  .button{
    display: flex;
    justify-content: flex-end;
    .back{
      width: 170px;
      height: 40px;
      background: rgba(255,255,255,0.05);
      border-radius: 5px;
      border: none;
      &:hover{
        background-color: rgba(255,255,255,0.1);
      }
    }
    .next{
      margin-left: 10px;
      width: 170px;
      height: 40px;
      border-radius: 5px;
      border: none;
      font-size: 14px;
      font-weight: bold;
      color: #FFF;
      &:hover{
        background-color:var(--color-primary-0)
      }
    }
  }
}
</style>
